// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from "@/pages/About.vue";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import Message from "@/pages/Message.vue";
import Detail from "@/pages/Detail.vue";


export default new VueRouter({
    routes:[
        {
            name:"guanyu",
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News, 
                },
                {
                    path:'message',
                    component:Message, 
                    children:[
                        {
                            name:"xiangqing",
                            path:"detail",
                            component:Detail,
                            // 1、props的第一种写法（只能传递死数据）：值为对象。该对象中的所有key-value都会以props的形式传给detail组件
                            // props:{a:1,b:'hello'}
                            // 2、props的第二种写法：值为布尔值。若布尔值为真，就会把该路由组件收到的多有params参数,props的形式传给detail组件
                            //props:true
                            // 3、props的第三种写法：值为函数。就会把该路由组件收到的多有params参数,props的形式传给detail组件
                            // props($route){
                            //     return {
                            //         id:$route.query.id,
                            //         title:$route.query.title
                            //     }
                            // }
                            props({query:{id,title}}){
                                return {
                                    id:id,
                                    title:title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})